<template>
  <el-upload
    action="#"
    list-type="picture-card"
    :file-list="fileList"
    :class="{disabled:fileList.length===1}"
    :on-remove="onRemove"
    :on-change="onChange"
    :before-upload="beforeUpload"
    :http-request="httpRequest"
    :limit="3"
  >
    <i class="el-icon-plus" />
  </el-upload>
</template>

<script>
import COS from 'cos-js-sdk-v5'

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDObaTAZu54rSs56ua3IJ7j8vVvBHE0byF',
  SecretKey: 'CGG8sRq5B6yhFftumV4TjngOwLdjeOwU'
})
export default {
  data() {
    return {
      fileList: [

      ]
    }
  },

  methods: {
    onRemove(file, fileList) {
      // 删除图片触发钩子函数   手动同步数据 方便组件动态类名判断
      this.fileList = fileList
    },
    onChange(file, fileList) {
      // 上传不同图片之后   同步图片文件数据
      this.fileList = fileList
    },
    beforeUpload(file) {
      // 上传前的校验
      // console.log(file, '上传校验')
      const MaxSize = 1024 * 1024 // 设置图片限制
      if (file.size > MaxSize) {
        this.$message.error('图片过大') // 提醒用户
        return false // 在这个函数内返回false 会停止上传
      }

      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error('图片仅支持jpg或者pag格式')
        return false // 限制图片格式
      }
    },
    httpRequest(data) {
      // console.log('真实上传')
      // 真实上传头像逻辑
      cos.putObject({
        Bucket: 'up-load81-1314424963', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: data.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: data.file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        // onProgress: function(progressData) {
        //   console.log(JSON.stringify(progressData))
        // }
      }, (err, data) => {
        console.log(err || data) // 如果上传成功   err形参会不存在。data会存在      如果上传出错。err会存在  data则不存在
        if (!err) {
          // console.log(data, '上传成功')
          this.fileList[0].status = 'success' // 修改数据   来显示右上角勾选图标
          this.fileList[0].url = 'http://' + data.Location // 同步上传完之后的图片在线地址到数据中 来正常显示
        }
      })
    }

  }

}
</script>

<style lang="scss" scoped>
    .disabled {
       ::v-deep   .el-upload--picture-card{
            display: none;
          }
    }
</style>
